<script lang="ts" setup>
// @ts-ignore
import {Message} from "@arco-design/web-vue";
// @ts-ignore
import emitter from "~/utils/mitt";
// @ts-ignore
let children = defineProps({
    childrenList: '' as any
});
const props = ref({
    name: '',
    replyParentId: ''
})

async function replyToUser(name: any, parentId: any) {
    props.value.name = name
    props.value.replyParentId = parentId
    await sessionStorage.setItem('replyData', JSON.stringify(props.value))
    emitter.emit('replyUserInfo')
    emitter.emit('getCaptchaReply')
}
</script>

<template>
    <ul :class="'children-'+index" v-for="(item,index) in children.childrenList">
        <li :class="'depth-2 parent comment comment-author-'+item.id" :id="'comment-'+item.id">
            <article :id="'div-comment-'+item.id" class="comment-body">
                <header class="user-meta">
                    <div class="comment-author">
                        <div class="user-avatar">
                            <img alt=""
                                 :src="item.avatar"
                                 class="avatar avatar-50 photo loaded" height="50" width="50"
                                 loading="lazy" decoding="async"
                                 @error="handleErrorFriendAvatar($event,String(item.nickname).charAt(0),'27B3BC')">
                        </div>
                        <cite>
                            <a target="_blank" :href="'/user/'+item.userId" class="url" rel="ugc">{{ item.nickname }}</a>
                        </cite>
                        <div class="comment-metadata">
                            <a class="grade-card" :title="item.badge?item.badge: item.nickname"></a>
                        </div>
                    </div>
                </header>
                <!-- .comment-author -->
                <footer class="comment-meta">
                    <a class="comment-time" href="#">
                        <time :datetime="item.createTime">
                            {{ item.createTime }}
                        </time>
                    </a>
                </footer><!-- .comment-meta -->
                <div class="comment-content">
                    <p><a class="fn" title="回到前评论位置" :href="'#comment-'+item.id">@{{ item.replyNickname }}</a>
                        {{ item.commentContent }}
                    </p>
                    <div class="reply">
                        <a rel="nofollow" class="comment-reply-link"
                           href="javascript:"
                           data-fancybox
                           data-src="#reply-to-user"
                           @click="replyToUser(item.nickname,item.parentId)"></a>
                    </div>
                </div>
            </article>
        </li>
    </ul>
</template>

<style scoped>

</style>
